<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  background-image: url("https://file.iviewui.com/iview-admin/login_bg.jpg");
  background-size: cover;
  background-position: center;
  position: relative;

  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }
  .text {
    font-size: 14px;
  }
  .el-card__header {
    padding: 20px 20px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  h4 {
    padding: 0;
    margin: 0;
  }

  .box-card {
    width: 480px;
    position: fixed;
    left: 50%;
    margin-left: -240px;
    top: 26%;
  }
  .bot {
    margin-top: 34px;
    margin-bottom: 10px;
    text-align: center;
    color: #c3c3c3;
    font-size: 14px;
  }
}
</style>
<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h4>
          <i style="margin-right:10px;" class="el-icon-setting"></i>欢迎来到全面竞猜后台</h4>
      </div>
      <div style="padding:10px;">
        <el-form :model="form" :rules="rules" ref="form">
        <div style="margin-top:16px;">
         <el-form-item  prop="userName">
          <el-input placeholder="请输入账号" v-model="form.userName">
            <el-button slot="prepend" icon="fa fa-user"></el-button>
          </el-input>
          </el-form-item>
        </div>
        <div style="margin-top:30px;">
        <el-form-item   prop="password" >
          <el-input placeholder="请输入密码" type="password" v-model="form.password"  @keyup.enter.native="goLogin">
            <el-button slot="prepend" icon="fa fa-lock"></el-button>
          </el-input>
         </el-form-item>
        </div>
        <div>
          <el-button type="primary"  @click="goLogin" style="width:100%;margin-top:34px;">登录</el-button>
        </div>
        </el-form>
        <p class="bot">
            输入全民竞猜后台管理员账号密码
        </p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      form: {
        userName: "",
        password: ""
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    async goLogin() {
      let user = this.form;
      if (user.userName == "" || user.password == "") {
        this.$message("请输入完整");
      } else {
        let result = await this.$http.post("/super/login", user);
        console.log(result);
        if (result.data == "-1") {
          this.$message({
            message: "密码输入错误",
            type: "warning"
          });
        } else if (result.data == "0") {
          this.$message({
            message: "账号密码输入错误",
            type: "warning"
          });
        } else {
          this.$store.commit("cuser", result.data);
          this.$message({
            message: "登陆成功",
            type: "success"
          });
          let results = await this.$http.get("/super/supperInfo");
          if(results.data.name=='supper'){
            this.goto("/");
          }else if(results.data.name=='control'){
            this.goto("/control");
          }else if(results.data.name=='cashs'){
            this.goto("/cashsIng");
          }else if(results.data.name=='recharge'){
            this.goto("/rechargesIng");
          }
        }
      }
    }
  }
};
</script>